<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}Ollama Proxy Admin{% endblock %}</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- === ADD CHART.JS LIBRARY === -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        .active {
            background-color: #4f46e5;
            color: white;
        }
        /* Style for the sidebar scrollbar */
        #sidebar::-webkit-scrollbar {
            width: 8px;
        }
        #sidebar::-webkit-scrollbar-track {
            background: #2d3748; /* gray-800 */
        }
        #sidebar::-webkit-scrollbar-thumb {
            background: #4a5568; /* gray-600 */
            border-radius: 4px;
        }
        /* Styles for the collapsed state */
        #sidebar.collapsed {
            width: 0;
            min-width: 0;
            padding: 0;
            overflow: hidden;
        }
        #sidebar-open-btn {
            display: none;
        }
        body.sidebar-collapsed #sidebar-open-btn {
            display: block;
        }
    </style>
</head>
<body class="bg-gray-100 font-sans leading-normal tracking-normal">

    <!-- Open Sidebar Button (Initially Hidden) -->
    <button id="sidebar-open-btn" class="fixed top-4 left-4 z-50 p-2 bg-gray-800 text-white rounded-md hover:bg-gray-700 shadow-lg">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
        </svg>
    </button>

    <div class="flex h-screen">
        <!-- Sidebar -->
        <div id="sidebar" class="bg-gray-800 text-white w-64 min-w-[16rem] flex-shrink-0 flex flex-col justify-between transition-all duration-300 ease-in-out">
            <div>
                <div class="flex items-center justify-between p-4 border-b border-gray-700 h-16">
                    <a href="{{ url_for('admin_dashboard') }}" class="text-2xl font-bold whitespace-nowrap">Ollama Proxy</a>
                    <button id="sidebar-close-btn" class="text-gray-400 hover:text-white">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
                        </svg>
                    </button>
                </div>
                
                {% if request.state.user %}
                <nav class="mt-4">
                    <a href="{{ url_for('admin_dashboard') }}" class="flex items-center px-4 py-3 hover:bg-gray-700 whitespace-nowrap {% if 'dashboard' in request.url.path %}active{% endif %}">
                        <svg class="w-6 h-6 mr-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 8v8m-4-5v5m-4-2v2m-2 4h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
                        Dashboard
                    </a>
                    <a href="{{ url_for('admin_servers') }}" class="flex items-center px-4 py-3 hover:bg-gray-700 whitespace-nowrap {% if 'servers' in request.url.path %}active{% endif %}">
                        <svg class="w-6 h-6 mr-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01"></path></svg>
                        Server Management
                    </a>
                    <a href="{{ url_for('admin_stats') }}" class="flex items-center px-4 py-3 hover:bg-gray-700 whitespace-nowrap {% if 'stats' in request.url.path %}active{% endif %}">
                         <svg class="w-6 h-6 mr-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path></svg>
                        Usage Stats
                    </a>
                     <a href="{{ url_for('admin_settings') }}" class="flex items-center px-4 py-3 hover:bg-gray-700 whitespace-nowrap {% if 'settings' in request.url.path %}active{% endif %}">
                        <svg class="w-6 h-6 mr-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
                        Settings
                    </a>
                    <a href="{{ url_for('admin_help') }}" class="flex items-center px-4 py-3 hover:bg-gray-700 whitespace-nowrap {% if 'help' in request.url.path %}active{% endif %}">
                        <svg class="w-6 h-6 mr-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.79 4 4 0 2.21-1.79 4-4 4-1.742 0-3.223-.835-3.772-2M12 18.5v.01M12 5.5v.01"></path></svg>
                        Help & Credits
                    </a>
                </nav>
                {% endif %}
            </div>

            <div class="w-full flex-shrink-0">
                {% if request.state.user %}
                <div class="p-4 border-t border-gray-700">
                    <p class="text-sm whitespace-nowrap">Welcome, <span class="font-semibold">{{ request.state.user.username }}</span></p>
                    
                    <!-- Redis Status Notifier -->
                    {% if is_redis_connected %}
                    <div class="flex items-center mt-2 text-xs text-green-400">
                        <span class="h-2 w-2 mr-2 bg-green-500 rounded-full"></span>
                        Redis: Connected
                    </div>
                    {% else %}
                    <a href="{{ url_for('admin_help') }}#redis-setup" class="flex items-center mt-2 text-xs text-red-400 hover:text-red-300 hover:underline">
                        <span class="h-2 w-2 mr-2 bg-red-500 rounded-full"></span>
                        Redis: Disconnected (Help)
                    </a>
                    {% endif %}
                </div>
                <a href="{{ url_for('admin_logout') }}" class="flex items-center w-full px-4 py-3 bg-red-600 hover:bg-red-700 whitespace-nowrap">
                     <svg class="w-6 h-6 mr-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path></svg>
                    Logout
                </a>
                {% endif %}
            </div>
        </div>

        <!-- Main Content -->
        <div class="flex-1 flex flex-col">
             <!-- Top Header -->
            <header class="bg-white shadow p-4 flex items-center justify-center flex-shrink-0 h-16">
                 <h1 class="text-xl font-semibold text-gray-700 text-center">{% block header_title %}{% endblock %}</h1>
            </header>

            <main class="flex-1 p-6 md:p-10 overflow-y-auto">
                {% include 'partials/_flash_messages.html' %}
                {% block content %}{% endblock %}
            </main>

            <footer class="bg-white p-4 text-center text-sm text-gray-500 flex-shrink-0">
                Ollama Proxy Server v{{ request.app.version }}
            </footer>
        </div>
    </div>

<script>
    document.addEventListener('DOMContentLoaded', () => {
        const body = document.body;
        const sidebar = document.getElementById('sidebar');
        const openBtn = document.getElementById('sidebar-open-btn');
        const closeBtn = document.getElementById('sidebar-close-btn');

        const openSidebar = () => {
            sidebar.classList.remove('collapsed');
            body.classList.remove('sidebar-collapsed');
            localStorage.setItem('sidebarState', 'open');
        };

        const closeSidebar = () => {
            sidebar.classList.add('collapsed');
            body.classList.add('sidebar-collapsed');
            localStorage.setItem('sidebarState', 'closed');
        };

        openBtn.addEventListener('click', openSidebar);
        closeBtn.addEventListener('click', closeSidebar);

        // Set initial state from localStorage
        if (localStorage.getItem('sidebarState') === 'closed') {
            closeSidebar();
        }
    });
</script>

</body>
</html>